<template>
  <div class="menu">
    <div class="plus"></div>
    <div class="menu-search">
      <van-search v-model="value" placeholder="请输入商品名称" shape="round" background="#ff594d" @click="showO" />
    </div>
    <div class="menu-box">
      <div class="aside-menu">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.typeDesc" v-for="(item, index) in typeList" :key="index" @click="getTypeProductData(item.type, index)" />
        </van-sidebar>
      </div>
      <div class="menu-content">
        <ul class="productList">
          <li class="productList-item" @click="goDetail(item.pid)" v-for="(item, index) in typeProductData" :key="index">
            <Product :data="item" />
          </li>
        </ul>
      </div>
    </div>
    <van-overlay class="overlay" :show="showOverlay" z-index="999" :lock-scroll="false">
      <Search @hiddenOverlay="showOverlay = false; s = false" :show="s" />
    </van-overlay>
  </div>
</template>





<script>
import Product from "../components/Product.vue";
import Search from "../components/Search.vue";

export default {
  name: "Menu",

  // 注册Product组件才可使用
  components: {
    Product,
    Search
  },

  data() {
    return {
      // 搜索框
      value: "",
      // 分类列表状态
      activeKey: 0,
      // 分类列表
      typeList: [],
      // 分类商品数据
      typeProductData: [],
      // 显示遮罩层
      showOverlay: false,
      // 控制搜索框自动聚焦，组件内监听这个值的变化
      s: false
    };
  },

  created() {
    // 设置导航栏当前索引值
    this.$util.setSessionItem("tabbarActive", 1);

    // 获取分类栏当前索引值
    if (sessionStorage.getItem("typeProductActive")) {
      this.activeKey = sessionStorage.getItem("typeProductActive");
    } else {
      // 当缓存中不存在则初始化为0
      this.activeKey = 0;
    }

    // 获取分类列表
    this.getTypeList();
  },

  methods: {
    // 显示搜索层
    showO(event) {
      event.preventDefault();
      this.s = true;
      this.showOverlay = true;
    },

    // 获取分类列表
    getTypeList() {
      this.axios({
        method: "get",
        url: "/type",
      })
        .then((res) => {
          // 
          let data = res.data;
          if (data.code === 400) {
            // 构造热卖推荐类型（因为请求数据里没有这个类型）
            data.result.unshift({ type: "isHot", typeDesc: "热卖推荐" });
            this.typeList = data.result;
            // 获取指定分类的商品数据;
            this.getTypeProductData(
              data.result[this.activeKey].type,
              this.activeKey
            );
          }
        })
        .catch((err) => {
          
        });
    },

    // 获取指定分类的商品数据
    getTypeProductData(type, index) {
      // 设置分类栏当前索引值
      this.$util.setSessionItem("typeProductActive", index);

      // 获取缓存数据
      let cacheData = localStorage.getItem("cacheProduct");
      // 判断是否存在缓存数据
      // 存在则转换数据类型为json对象（因为数据是字符串），否则初始化为空对象
      cacheData = cacheData ? JSON.parse(cacheData) : {};
      // 获取当前时间
      let currentTime = new Date().getTime();
      // 判断缓存是否过期
      // 缓存数据中存在过期时间，并且当前时间减去缓存中的过期时间不超出数据指定有效时长
      if (cacheData.expires && currentTime - cacheData.expires < 60 * 1000) {
        // 判断当前类型的商品数据是否存在
        if (cacheData[type]) {
          // 如果存在且未过期则使用缓存数据，并退出请求
          this.typeProductData = cacheData[type];
          return;
        }
      } else {
        // 如果过期则清空缓存对象
        cacheData = {};
      }
      let key = "";
      let value = "";
      // 如果请求类型为热卖推荐，则需要自定义请求参数
      if (type === "isHot") {
        key = type;
        value = 1;
      } else {
        key = "type";
        value = type;
      }
      // 请求数据
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key,
          value,
        },
      })
        .then((res) => {
          // 
          let data = res.data;
          if (data.code === 500) {
            // 将请求回来的商品数据添加到data
            this.typeProductData = data.result;
            // 判断缓存对象中是否存在过期时间
            if (!cacheData.expires) {
              // 在缓存对象中添加一个当前时间（用以判断数据有效时间）
              cacheData.expires = new Date().getTime();
            }
            // 将请求的数据添加到缓存对象中（key为请求的商品类型）
            cacheData[type] = data.result;
            // 将缓存对象转成字符串并存入localstorage（key为cacheProduct）
            localStorage.setItem("cacheProduct", JSON.stringify(cacheData));
          }
        })
        .catch((err) => {
          
        });
    },

    // 转到商品详情页
    goDetail(pid) {
      this.$router.push({
        name: "Detail",
        query: {
          pid,
        },
      }).catch(()=>{});
    },
  },
};
</script>





<style lang="less" scoped>
.plus {
  background-color: #000;
}
.menu {
  .menu-search {
    position: sticky;
    top: 0;
  }
  .menu-box {
    position: fixed;
    top: 54px + 28px;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    .aside-menu {
      width: 80px;
      height: 100%;
      color: red;
      font-size: 14px;
      text-align: center;
      overflow-y: auto;
      .van-sidebar-item {
        padding: 15px 0;
        color: #666;
      }
      .van-sidebar-item--select {
        color: #ffa341;
      }
      .van-sidebar-item--select::before {
        background-color: #ffa341;
      }
    }
    .menu-content {
      flex: 1;
      padding: 10px 10px 0 10px;
      background-color: #fff;
      text-align: center;
      overflow-y: auto;
      .productList {
        display: flex;
        flex-wrap: wrap;
        .productList-item {
          margin: 0 0 10px 10px;
          width: calc(50% - 5px);
          &:nth-child(odd) {
            margin-left: 0;
          }
        }
      }
    }
  }
}
</style>